import React, { Component, Fragment } from 'react';
import { Spin, Row, Col, Card, Icon, Tag, Button, Tooltip as TooltipAntd, Popover,Input} from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import router from 'umi/router';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

class Dashboard extends Component {
    constructor() {
        super();
        this.state={
            dataSouce: null
        }
    }

    componentWillMount() {
        window.Isoption = false;
        this.getOrderProfileData()
    }
    componentDidMount() {
        window.Isoption = true;
   }


getOrderProfileData =()=> {
    const { dispatch} = this.props;
    dispatch({
        type:'stortMessage/GetOrderProfileData',
        callBack: {
            success: res=> {
                if(res.Code===0) {
                    console.log(res.Data)
                    this.setState({
                        dataSouce: res.Data
                    })
                }
            },
            error: res => {
                console.log(res);
            }
        }
    })
}

handleVisibleChange = (visible) =>{
    const { dispatch } = this.props;
    if(visible){
      dispatch({
        type: 'orderPickUp/GetWxCode',
        callBack: {
          success: res => {
            if(res.Code==0){
              this.setState({
                wxaUrl:res.Data.WxCodeUrl
              })
            }
          },
        },
      });
    }
  }

  showQRcode = data => {
    const {loading2} = this.props;
    return (
      <Spin spinning={loading2}>
        <div className="xkd-text-center">
          {this.state.wxaUrl ? (
            <div style={{width:240,minHeight:240}}>
              <Input value={`/pages/home/micropage?id=${data}`} className="xkd-mb8" />
              <img
                src={`${cdnUrl + '/'+this.state.wxaUrl||'https://xkdsaas.oss-cn-shanghai.aliyuncs.com/MerChant/2905/1260/1508825223069.png'}`}
                style={{ width: 240 }}
              />
            </div>
          ) : (
            <div style={{width:240,minHeight:240,lineHeight:'240px',textAlign:'center'}}>
              <span>未绑定小程序</span>
            </div>
          )}
        </div>
      </Spin >
    );
  };

  render() {
    const {cdnUrl,global, loading} = this.props;
    const {dataSouce} = this.state;
    const width = window.screen.availWidth> 1440?window.screen.availWidth-184*2-96:960;
    return (
      <Fragment>
        <Spin spinning={loading} >
          {/* <Card className={styles.DashboardWarn}>
            <Row>
              <Col>
                <a>立即续费</a>
                <Icon type="exclamation-circle" theme="filled" style={{ color: '#FFBF00' }} />
                您的店铺已打烊，客户将无法访问店铺页面，这会影响到正常交易，请及时续费。</Col>
            </Row>
          </Card> */}
          <Card
            className={styles.DashboardHead}
            bordered={false}
          >
            <Row className="tooltipRootHead">
              <Col>
                <div className="left">
                  <img src={global.oemInfo?global.oemInfo.cdnUrl+'/'+global.oemInfo.storeLogo: ''} />
                  <p>{global.oemInfo &&global.oemInfo.storeName}</p>
                  <Tag color="#52C41A">{dataSouce&&dataSouce.StoreStatuName}</Tag>
                  <Tag className="test">{dataSouce&&dataSouce.VisionName}</Tag>
                  {dataSouce&&dataSouce.EnterpriseStatus &&<Tag className="enterprise">企业认证</Tag>}
                </div>
                <div className="right">
                <Popover
                    content={this.showQRcode(Math.random())}
                    trigger="click"
                    placement="bottom"
                    onVisibleChange={(visible)=>this.handleVisibleChange(visible,Math.random())}
                >
                    <Button>访问店铺</Button>
                </Popover>            
                </div>
              </Col>
            </Row>
          </Card>
          <Card
            className={styles.DashboardMonitor}
            bordered={false}
            title="数据监控"
            extra={<p>上次更新 {dataSouce&&dataSouce.LastModifiedTime}</p>}
          >
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_01.png'} />
                待发货订单
                <p>{dataSouce&&dataSouce.ProfileData.DeliveryOrderNum}</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_02.png'} />
                待付款订单
                <p>{dataSouce&&dataSouce.ProfileData.PendingOrderNum}</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_03.png'} />
                待审核评价
                <p>{dataSouce&&dataSouce.ProfileData.AuditEvaluationOrderNum}</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_04.png'} />
                维权订单
                <p>{dataSouce&&dataSouce.ProfileData.RightsOrderNum}</p>
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_05.png'} />
                支付金额 (元)
                <p>{dataSouce&&dataSouce.ProfileData.TotalPaidAmount}</p>
                <span>昨日 {dataSouce&&dataSouce.ProfileData.TotalPaidAmountFromYesterday}</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_06.png'} />
                支付订单数
                <p>{dataSouce&&dataSouce.ProfileData.TotalPaidOrderNum}</p>
                <span>昨日 {dataSouce&&dataSouce.ProfileData.TotalPaidOrderNumFromYesterday}</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_07.png'} />
                支付人数
                <p>{dataSouce&&dataSouce.ProfileData.TotalPaidMemberNum}</p>
                <span>昨日 {dataSouce&&dataSouce.ProfileData.TotalPaidMemberNumFromYesterday}</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_08.png'} />
                访客数
                <p>{dataSouce&&dataSouce.ProfileData.TotalVisitorsNum}</p>
                <span>昨日 {dataSouce&&dataSouce.ProfileData.TotalVisitorsNumFromYesterday}</span>
              </Col>
            </Row>
          </Card>
          <Card
            className={styles.DashboardStatis}
            bordered={false}
            title="经营趋势"
            extra={<p>上次更新 {dataSouce&&dataSouce.LastModifiedTime}</p>}
          >
             <LineChart
                width={width}
                height={300}
                data={dataSouce&&dataSouce.TrendData}
                margin={{top: 8, right: 32, left: 24, bottom: 8,}}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="Date" />
                <YAxis />
                <Tooltip />
                <Legend verticalAlign="top" height={36}/>
                <Line type="monotone" name="支付金额 " dataKey="TotalPaidAmount" stroke="#2E74FF" />
                <Line type="monotone" name="支付订单数" dataKey="TotalPaidOrderNum" stroke="#F5222D" />
                <Line type="monotone" name="支付人数" dataKey="TotalPaidMemberNum" stroke="#FF9800" />
                <Line type="monotone" name="访客数" dataKey="TotalVisitorsNum" stroke="#52C41A" />
            </LineChart>
          </Card>

          <Card
            className={styles.DashboardShortcut}
            bordered={false}
            title="常用功能"
          >
            <Row>
              <Col span={6} className="xkd-cursor-pointer">
                <div  onClick={()=> {router.replace({pathname: `/${window.storeId}/goods/releaseGoods`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_11.png'} />
                    <span>发布商品</span>
                </div>
              </Col>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/store/pages`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_12.png'} />
                    <span>微页面</span>
                </div>               
              </Col>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/order/delivery`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_13.png'} />
                    <span>发货管理</span>
                </div> 
              </Col>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/order/rates/pending`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_14.png'} />
                    <span>评价审核</span>
                </div></Col>
            </Row>
            <Row>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/order/refunds`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_15.png'} />
                    <span>维权处理</span>
                </div>
              </Col>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/customer/list`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_16.png'} />
                    <span>客户管理</span>
                </div>
            </Col>
              <Col span={6} className="xkd-cursor-pointer">
                <div onClick={()=> {router.replace({pathname: `/${window.storeId}/marketing/coupon`})}}>
                    <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_17.png'} />
                    <span>优惠券</span>
                </div> 
              </Col>
            </Row>
          </Card>
        </Spin>
      </Fragment>
    );
  }
}
export default connect(({ stortMessage, global, loading }) => ({
  stortMessage,
  global,
  cdnUrl: global.oemInfo.cdnUrl,
  loading: loading.effects['stortMessage/GetOrderProfileData'],
  loading2: loading.effects['orderPickUp/GetWxCode'],
}))(Dashboard);